<template>
  <div class="operator">
    <a-button v-for="(btnItem,index) in toolbarList" v-if="btnItem.compTag === 'button' || btnItem.compTag === 'a'" :key="index" :type="btnItem.type" :disabled="btnItem.disabled" @[btnItem.eventName]="btnOnClick(btnItem)">
      <a-icon v-if="btnItem.leftIcon !== undefined" :type="btnItem.leftIcon.icon" />  {{ btnItem.name }}
      <a-icon v-if="btnItem.rightIcon !== undefined" :type="btnItem.rightIcon.icon" />
      <a-tooltip v-if="btnItem.tooltipIcon !== undefined" :title="btnItem.tooltipIcon.title">
        <a-icon :type="btnItem.tooltipIcon.icon" />
      </a-tooltip>
    </a-button>
    <!--
        <a-upload :key="index"  v-for="(btnItem,index) in toolbarList" :change="changeFile" :file-list="fileList" :before-upload="beforeUpload" :showUploadList="showUploadList" v-if="btnItem.compTag === 'upload'">
      <a-button  v-on:[btnItem.eventName]="btnOnClick(btnItem)"> <a-icon type="upload" />111{{btnItem.name}}</a-button>
    </a-upload>
    -->
    <a-upload
      v-for="(btnItem,index) in toolbarList"
      v-if="btnItem.compTag === 'upload'"
      :key="index"
      :accept="btnItem.accept"
      name="file"
      :show-upload-list="false"
      :multiple="false"
      :headers="tokenHeader"
      :action="importExcelUrl"
      :data="paramData"
      :custom-request="downloadFilesCustomRequest"
      :disabled="btnItem.disabled"
      @change="handleUpload"
    >
      <a-button  :icon="btnItem.icon" :disabled="btnItem.disabled" @[btnItem.eventName]="btnOnClick(btnItem)">
        <a-icon v-if="btnItem.leftIcon !== undefined" :type="btnItem.leftIcon.icon" />  {{ btnItem.name }}
        <a-icon v-if="btnItem.rightIcon !== undefined" :type="btnItem.rightIcon.icon" />
        <a-tooltip v-if="btnItem.tooltipIcon !== undefined" :title="btnItem.tooltipIcon.title">
          <a-icon :type="btnItem.tooltipIcon.icon" />
        </a-tooltip>
      </a-button>
    </a-upload>
    <!--
    <a-upload  v-for="btnItem in toolbarList"  v-if="btnItem.compTag === 'upload'"  :accept="accept" name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
               @change="handleUpload">
      <a-button type="primary" icon="import">ff{{btnItem.name}}</a-button>
    </a-upload>
   -->
    <!-- v-if="tableSelectedKey.length > 0"-->
    <a-dropdown>
      <a-menu slot="overlay">
        <a-menu-item v-for="(menuItem, index) in btnMenuList" :key="index">
          <!--          <a v-if="menuItem.compTag === 'a'" @[menuItem.eventName]="btnOnClick(menuItem)">{{ menuItem.name }}</a>-->
          <a v-if="menuItem.compTag === 'button'" :disabled="menuItem.disabled" @[menuItem.eventName]="btnOnClick(menuItem)">
            <a-icon v-if="menuItem.leftIcon !== undefined" :type="menuItem.leftIcon.icon" />   {{ menuItem.name }}
            <a-icon v-if="menuItem.rightIcon !== undefined" :type="menuItem.rightIcon.icon" />
            <a-tooltip v-if="menuItem.tooltipIcon !== undefined" :title="menuItem.tooltipIcon.title">
              <a-icon :type="menuItem.tooltipIcon.icon" />
            </a-tooltip>
          </a>

          <a-upload v-else-if="menuItem.compTag === 'upload'" :file-list="fileList"   :accept="menuItem.accept">
            <a-button :disabled="menuItem.disabled"> <a-icon type="upload" />{{ menuItem.name }}</a-button>
          </a-upload>
          <a-popconfirm v-else-if="menuItem.compTag === 'confirm'" :disabled="menuItem.disabled" :title="menuItem.title" @[menuItem.eventName]="btnOnClick(menuItem)"><a>{{ menuItem.name }}</a></a-popconfirm>
          <a v-else :disabled="menuItem.disabled" @[menuItem.eventName]="btnOnClick(menuItem)">
            <a-icon v-if="menuItem.leftIcon !== undefined" :type="menuItem.leftIcon.icon" />   {{ menuItem.name }}
            <a-icon v-if="menuItem.rightIcon !== undefined" :type="menuItem.rightIcon.icon" />
            <a-tooltip v-if="menuItem.tooltipIcon !== undefined" :title="menuItem.tooltipIcon.title">
              <a-icon :type="menuItem.tooltipIcon.icon" />
            </a-tooltip>
          </a>
        </a-menu-item>
      </a-menu>
      <a-button v-show="moreBtnShow" style="margin-left: 8px"> 更多操作
        <a-icon type="down" />
      </a-button>
    </a-dropdown>

    <a-dropdown>
      <a-menu slot="overlay">
        <a-menu-item v-for="(menuItem, index) in sessionMenuList" :key="index">
          <!--          <a v-if="menuItem.compTag === 'a'" @[menuItem.eventName]="btnOnClick(menuItem)">{{ menuItem.name }}</a>-->
          <a v-if="menuItem.compTag === 'button'" :disabled="menuItem.disabled" @[menuItem.eventName]="btnOnClick(menuItem)">{{ menuItem.name }}</a>

          <a-upload v-else-if="menuItem.compTag === 'upload'" :file-list="fileList">
            <a-button :disabled="menuItem.disabled"> <a-icon type="upload" />{{ menuItem.name }}</a-button>
          </a-upload>
          <a-popconfirm v-else-if="menuItem.compTag === 'confirm'" :disabled="menuItem.disabled" :title="menuItem.title" @[menuItem.eventName]="btnOnClick(menuItem)"><a>{{ menuItem.name }}</a></a-popconfirm>
          <a v-else :disabled="menuItem.disabled" @[menuItem.eventName]="btnOnClick(menuItem)">{{ menuItem.name }}</a>
        </a-menu-item>
      </a-menu>
      <a-button v-show="moreSessionShow" style="margin-left: 8px"> 个人配置
        <a-icon type="down" />
      </a-button>
    </a-dropdown>
  </div>
</template>
<script>
import { getRefreshToken, getExpireTime, getToken, submitDealReq, getFnByFnType, changeSelectRow } from '@/utils/auth'
import request from '@/utils/request'
export default {
  name: 'OperatorBtnTplList',
  components: {
  },
  props: ['toolbarMenuData', 'toolbarListData', 'sessionConfigTplData', 'tableSelectedKeyData', 'uiPageUrl'],
  data() {
    return {
      accept: 'image/png,image/jpg,video/mp4,.txt,.doc,.docx,.ppt,.pptx',
      menuItem: {},
      fileList: [],
      showUploadList: false,
      openFileDialogOnClick: true,
      uploading: false,
      moreBtnShow: false,
      moreSessionShow: false,
      btnMenuList: [],
      toolbarList: [],
      sessionMenuList: [],
      tableSelectedKey: [],
      tokenHeader: { 'Authorization': 'bearer ' + getToken() },
      importBaseUrl: '/autodeal/file/ctr',
      importExcelUrl: '/autodeal/file/ctr/upload',
      paramData: { 'pkRefId': '1', 'pkSubId': '212' }
    }
  },
  computed: {
  },
  watch: {
    uiPageUrl(val) {
      console.log('....watch......', this.uiPageUrl)
      // this.importExcelUrl = this.importBaseUrl+ this.uiPageUrl.S_UI_PAGE_ID_IDX_2025+'/'+this.S_UI_PAGE_VER_IDX_2025
      this.paramData.S_PAGE_ID = this.uiPageUrl.S_UI_PAGE_ID_IDX_2025
      this.paramData.S_PAGE_VER = this.uiPageUrl.S_UI_PAGE_VER_IDX_2025
    },
    toolbarListData(val) {
      this.toolbarList = val
    },
    toolbarMenuData(val) {
      this.btnMenuList = val
      if (this.btnMenuList.length === 0) {
        this.moreBtnShow = false
      } else {
        if (this.btnMenuList.length > 0) {
          this.moreBtnShow = true
        }
      }
    },
    sessionConfigTplData(val) {
      this.sessionMenuList = val
      if (this.sessionMenuList.length === 0) {
        this.moreSessionShow = false
      } else {
        if (this.sessionMenuList.length > 0) {
          this.moreSessionShow = true
        }
      }
    },
    tableSelectedKeyData(val) {
      this.tableSelectedKey = val
      // if (this.tableSelectedKey.length === 0) {
      //   this.moreBtnShow = false
      // } else {
      //   if (this.btnMenuList.length > 0) {
      //     this.moreBtnShow = true
      //   }
      // }
    }
  },
  methods: {
    getSubmitParam() {

    },
    downloadFilesCustomRequest(data) {
      this.$emit('tableOperatorBtnUpload', this.menuItem, data)
    },

    changeUploadFile(data) {
      this.$emit('tableOperatorBtnUpload', this.menuItem, data)
    },

    // saveFile(data) {
    //   const formData = new FormData()
    //   formData.append('file', data.file)
    //   for (const key in this.paramData) {
    //     formData.append(key, this.paramData[key])
    //   }
    //   console.log('0000000000', this.uiPageUrl)
    //   formData.append('S_PAGE_ID', this.uiPageUrl.S_UI_PAGE_ID_IDX_2025)
    //   formData.append('S_PAGE_VER', this.uiPageUrl.S_UI_PAGE_VER_IDX_2025)
    //   const refExport = this.menuItem.refExport
    //   formData.append('btnIdIdx', refExport.refExportBtnId)
    //   formData.append('apiPageIdIdx', refExport.refExportObjPageId)
    //   formData.append('apiPageVerIdx', refExport.refExportObjPageVer)
    //   request.upload('/autocode/file/ctr/upload', formData).then((res) => {
    //     console.log('..res.data..', res)
    //     /** * **/
    //     if (res.status === 200) {
    //       const fileData = res.data.data
    //       for (const i in fileData) {
    //         this.$message.success(`${fileData[i].s_FILE_NAME} file uploaded successfully`)
    //         const param = {}
    //         param.S_UPLOAD_FILE_PK_ID = fileData[i].s_ID
    //         param.S_PAGE_ID = refExport.refExportObjPageId
    //         param.S_PARTITION = refExport.refExportObjPartition
    //         submitDealReq(param).then((res) => {
    //           this.$message.success(`${fileData[i].s_FILE_NAME} file data insert successfully`)
    //         }).catch(reason => {
    //           this.$message.error(`${fileData[i].s_FILE_NAME} file data insert error`)
    //           console.log('reason', reason)
    //         })
    //       }
    //     } else {
    //       this.$message.error(res.statusText)
    //     }
    //   })
    // },
    // fileFormatter(data) {
    //   const file = {
    //     uid: data.uuid,
    //     name: data.name,
    //     status: 'done',
    //     response: '{"status": "success"}'
    //   }
    //   return file
    // },
    test() {
      this.searchForm.validateFields((err, values) => {
        console.log('prevSave', values)
        this.tableQueryParam = Object.assign(this.tableQueryParam, values)
        if (!err) {

        }
      })
      console.log('test', this.tableQueryParam)
    },
    beforeUpload(file) {
      console.log('handleUpload...uiPageUrl..', this.uiPageUrl)
      this.fileList = [...this.fileList, file]
      // this.handleUpload();
      return false
    },
    changeFile() {
      console.log('changeFile')
    },
    customRequest() {
      console.log('customRequest')
    },
    handleUpload(info) {
      console.log('handleUpload.....', info)
      console.log('handleUpload...uiPageUrl..', this.uiPageUrl)
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList)
      }
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`)
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    btnOnClick(btnItem) {
      const thisObj = this
      thisObj.menuItem = btnItem
      if (btnItem.mutiBtn === 1) {
        // 单选数据
        if (this.tableSelectedKeyData.length === 0) {
          thisObj.$message.warning('请先勾选数据!')
          return
        }
        if (this.tableSelectedKeyData.length > 1) {
          thisObj.$message.warning('只支持选择单挑数据,请重新勾选数据!')
          return
        }
      } else if (btnItem.mutiBtn === 2) {
        // 多选数据
        if (this.tableSelectedKeyData.length === 0) {
          thisObj.$message.warning('请先勾选数据!')
          return
        }
      }
      this.$emit('tableOperatorBtnOnClick', btnItem)
    },
    // handleBtnMenuCommand(command) {
    //   this.$emit('tableOperatorBtnMenuCommand', command)
    // },
    handleConfirm(menuFn, record) {
      // let fn = menuFn
      console.log('record', record)
      console.log('menuFn', menuFn)
      // this[fn](record);
    }
  }
}
</script>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>

<style lang="less" scoped>
  .search{
    margin-bottom: 54px;
  }
  .fold{
    width: calc(100% - 216px);
    display: inline-block
  }
  .operator{
    margin-bottom: 18px;
  }
  @media screen and (max-width: 900px) {
    .fold {
      width: 100%;
    }
  }
</style>
